<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>定位构件</title>
 
    <link href="../BIMadmin/layui/css/layui.css" rel="stylesheet">
  

    <style media="screen">
        * {
            margin: 0;
            padding: 0
        }

        html,
        body {
            height: 100%
        }

        .main {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
            width: 100%
        }

        .model {
            flex: 1
        }

        .buttons {
            font-size: 0;
        }

        .button {
            margin: 5px 0 5px 5px;
            width: 100px;
            height: 30px;
            border-radius: 3px;
            border: none;
            background: #32D3A6;
            color: #FFFFFF;
        }

    .leftbar {
        position: fixed;
        top: 300px;
        right: 0;
        width: 45px;
        height: 30px;
        background-color: #333;
        overflow-x: hidden;
        transition: width 0.3s;    
    }

    .sidebar {
        position: fixed;
        top: 130px;
        right: 46px;
        width: 0; /* 初始状态下隐藏侧边栏 */
        height: 300px;/* auto自适应内容高度,但是未能滚动 */
        background-color: #333;
        overflow-x: hidden;
        overflow-y: auto; /* 添加这一行 */
        scrollbar-width: none;
        transition: width 0.3s;        
    }
    
    </style>



    <!-- 引用BIMFACE的JavaScript显示组件库 -->
    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"
        charset="utf-8"></script>
</head>

<body>
    
    
<div class='main'>      
  

   <!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->    
        
   <div class='model' id="domId">     </div>
        
    <div class="leftbar" id="toggleButton"></div>
   <!-- 导航栏包在leftbardiv时可自动关闭 -->    
    <div class="sidebar" >
      
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
            <li data-name="senior" class="layui-nav-item">
                <a href="javascript:;" lay-tips="闸首" lay-direction="2">
                   
                  <cite>闸首</cite>
                </a>
                <dl class="layui-nav-child">
                  <dd>
                    <button button type="button" class="layui-btn layui-btn-fluid layui-btn-primary " id="btnZoomToComponents" onclick="zoomToComponents()">定位到构件</button></dd>
                  </dd>
                  <dd><button type="button" class="layui-btn layui-btn-fluid layui-btn-primary " lay-on="test-offset2" data-offset="">查看设计图纸</button></dd>  

                <dd>          
                  <div class="layui-btn-group">
                    <button type="button" class="layui-btn">定位</button>
                    <button type="button" class="layui-btn ">图纸</button>                   
                  </div>
                </dd> 

                  <dd data-name="echarts">
                    <a href="javascript:;">闸首</a>
                    <dl class="layui-nav-child">
                      <dd><button button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green" id="btnZoomToComponents" onclick="zoomToComponents()">缩放到构件</button>
                      </dd>
                      
                      <dd><button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-purple" lay-on="test-offset2" data-offset="">查看设计图纸</button></dd>
                      <dd><a lay-href="senior/echarts/map.html">地图</a></dd>
                    </dl>
                  </dd>
                </dl>
              </li>
        
              <li data-name="senior" class="layui-nav-item">
                <a href="javascript:;" lay-tips="质量板块" lay-direction="2">
                  <i class="layui-icon layui-icon-senior"></i>
                  <cite>质量板块</cite>
                </a>
                <dl class="layui-nav-child">
                  <dd>
                    <a layadmin-event="im">LayIM 通讯系统</a>  
                  </dd>
                  <dd data-name="echarts">
                    <a href="javascript:;">Echarts集成</a>
                    <dl class="layui-nav-child">
                      <dd><a lay-href="senior/echarts/line.html">折线图</a></dd>
                      <dd><a lay-href="senior/echarts/bar.html">柱状图</a></dd>
                      <dd><a lay-href="senior/echarts/map.html">地图</a></dd>
                    </dl>
                  </dd>
                </dl>
              </li>

              <!-- 目条 -->  
              <li  class="layui-nav-item">

                <a href="javascript:;" >                  
                  <cite>虚拟样板</cite>
                </a>

                <dl class="layui-nav-child">
                  <dd>
                    <a href="javascript:;">施工工艺样板</a>
                    <dl class="layui-nav-child">
                      <dd><button button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green" id="btnZoomToComponents" onclick="zoomToComponents()">缩放到构件</button></dd>
                      <dd><button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-purple" lay-on="test-offset2" data-offset="">查看设计图纸</button></dd>
                    </dl>
                  </dd>

                  <dd>
                    <a href="javascript:;">施工工艺样板</a>
                    <dl class="layui-nav-child">
                      <dd><button button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green" id="btnZoomToComponents" onclick="zoomToComponents()">缩放到构件</button>
                      <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-purple" lay-on="test-offset2" data-offset="">查看设计图纸</button></dd>
                    </dl>
                  </dd>

                  <dd>
                    <a href="javascript:;">工地标准化展示</a>
                    <dl class="layui-nav-child">
                      <dd> ——<div class="layui-btn-group">
                        <button type="button" class="layui-btn" id="btnZoomToComponents" onclick="zoomToComponents()">定位</button>
                        <button type="button" class="layui-btn" lay-on="test-offset2">图纸</button>                   
                      </div></dd>
                      <dd><a lay-href="component/form/group.html">CI标准</a></dd>
                    </dl>
                  </dd>
                  
                </dl>
            </li> 
                  
            </ul>

        <ul class="layui-nav layui-nav-tree">
            <li class="layui-nav-item layui-nav-itemed">
              <a href="javascript:;">默认展开</a>
              <dl class="layui-nav-child">
                <dd><button button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green" id="btnZoomToComponents" onclick="zoomToComponents()">缩放到构件</button></dd>
                <dd><button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-purple" lay-on="test-offset2" data-offset="">查看设计图纸</button></dd>
                
              </dl>
            </li>
            <li class="layui-nav-item layui-nav-itemed">
              <a href="javascript:;">默认展开</a>
              <dl class="layui-nav-child">
                <dd><button button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green" id="btnZoomToComponents" onclick="zoomToComponents()">缩放到构件</button></dd>
                <dd><button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-purple" lay-on="test-offset2" data-offset="">查看设计图纸</button></dd>
                
              </dl>
            </li>
            <li class="layui-nav-item layui-nav-itemed">
              <a href="javascript:;">默认展开</a>
              <dl class="layui-nav-child">
                <dd><button button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green" id="btnZoomToComponents" onclick="zoomToComponents()">缩放到构件</button></dd>
                <dd><button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-purple" lay-on="test-offset2" data-offset="">查看设计图纸</button></dd>
                
              </dl>
            </li>
            <li class="layui-nav-item layui-nav-itemed">
              <a href="javascript:;">默认展开</a>
              <dl class="layui-nav-child">
                <dd><button button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green" id="btnZoomToComponents" onclick="zoomToComponents()">缩放到构件</button></dd>
                <dd><button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-purple" lay-on="test-offset2" data-offset="">查看设计图纸</button></dd>
                
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">默认收缩</a>
              <dl class="layui-nav-child">
                <dd><button button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green" id="btnZoomToComponents" onclick="zoomToComponents()">缩放到构件</button></dd>
                <dd><button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-purple" lay-on="test-offset2" data-offset="">查看设计图纸</button></dd>
    
              </dl>
            </li>
            
          </ul>
        </div>
      

    
</div>

    <script type="text/javascript">
        let viewer3D;
        let app;
        let viewToken = '62d1674b965c45fd85103fa633cbc753';
        // 初始化显示组件
        let options = new BimfaceSDKLoaderConfig();
        options.viewToken = viewToken;
        BimfaceSDKLoader.load(options, successCallback, failureCallback);
        function successCallback(viewMetaData) {
            if (viewMetaData.viewType == "3DView") {
                // ======== 判断是否为3D模型 ========        
                // 获取DOM元素
                let dom4Show = document.getElementById('domId');
                let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
                webAppConfig.domElement = dom4Show;
                // 设置全局单位
                webAppConfig.globalUnit = Glodon.Bimface.Common.Units.LengthUnits.Millimeter;
                // 创建WebApplication
                app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
                // 添加待显示的模型
                app.addView(viewToken);
                // 从WebApplication获取viewer3D对象
                viewer3D = app.getViewer();
                // 监听添加view完成的事件
                viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {

                    //自适应屏幕大小
                    window.onresize = function () {
                        viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
                    }
                    // 调用viewer3D对象的Method，可以继续扩展功能
                    // 渲染3D模型
                    viewer3D.render();
                });
            }
        }
        function failureCallback(error) {
            console.log(error);
        }
        function zoomToBoundingBox() {
            let boundingbox = {
                "min": {
                    "x": -9496.219279454494,
                    "y": -4299.299971053061,
                    "z": 999.9607157957682
                },
                "max": {
                    "x": 8443.779875881222,
                    "y": 6382.751044860747,
                    "z": 9475.048556778615
                }
            }
            viewer3D.getCamera().zoomToBoundingBox(boundingbox);
        }
        function zoomToComponents() {
            viewer3D.getModel().clearSelectedComponents();
            viewer3D.getModel().setSelectedComponentsById(["270097"]);
            viewer3D.getModel().zoomToSelectedComponents();
        }
    </script>

<script src="../BIMadmin/layui/layui.js"></script>


 <script>
        var toggleButton = document.getElementById('toggleButton');
        var sidebar = document.querySelector('.sidebar');
        toggleButton.addEventListener('click', function() {
            if (sidebar.style.width === '200px') {
                sidebar.style.width = '0'; // 隐藏侧边栏
            } else {
                sidebar.style.width = '200px'; // 显示侧边栏
            }
        });

        // 监听滚动事件
        window.addEventListener('scroll', function() {
            // 获取滚动高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 根据滚动高度设置侧边栏高度
            sidebar.style.height = scrollTop + 'px';
        });
 </script>

<script>
    layui.use(function(){
      var $ = layui.$;
      var layer = layui.layer;
      var util = layui.util;
      // 事件
      util.on('lay-on', {
        'test-iframe-handle': function(){
          layer.open({
            type: 2,
            area: ['550px', '510px'],
            content: './操作说明.html',
            fixed: false, // 不固定
            maxmin: true,
            shadeClose: true,
            //btn: ['获取表单值', '取消'],
            btnAlign: 'c',
            yes: function(index, layero){
              // 获取 iframe 的窗口对象
              var iframeWin =  window[layero.find('iframe')[0]['name']];
              var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
              var value = elemMark.val();
              
              if($.trim(value) === '') return elemMark.focus();
              // 显示获得的值
              layer.msg('获得 iframe 中的输入框标记值：'+ value);
            }
          });
        },
        'test-iframe-video': function(){
          layer.open({
            type: 2,
            title: false,
            area: ['630px', '360px'],
            shade: 0.8,
            closeBtn: 0,
            shadeClose: true,
            content: 'https://www.bilibili.com/video/BV1M94y1N7Xt/?spm_id_from=autoNext&vd_source=23eb051d73622fb8d7c5294cc2bc74a0' // video 地址
          });
          layer.msg('点击遮罩区域可关闭');
        },
        'test-iframe-overflow': function(){
          layer.open({
            type: 2,
            area: ['550px', '520px'],
            skin: 'layui-layer-rim', // 加上边框
            content: ['/layer/test/1.html', 'no'] // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
          });
        },
        'test-iframe-curl': function(){
          layer.open({
            type: 2,
            title: 'iframe 任意 URL',
            shadeClose: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['900px', '600px'],
            content: 'https://docs.qq.com/pdf/DWUFpSnNuTmdIQlVU?'
          });
        }
      })
    });
    </script>


<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  var $ = layui.$;
  // 事件
  util.on('lay-on', {
    'test-offset': function(){
      var othis = $(this);
      var offset = othis.data('offset');
      // 弹出位置
      layer.open({
        type: 1,
        offset: offset || ['200px', '280px'], // 详细可参考 offset 属性
        id: 'ID-demo-layer-offset-'+ offset, // 防止重复弹出
        content:  '<iframe  src="./操作说明.html" width=100%px height=100%></iframe>',
        area: ['550px', '520px'],
        //btn: '关闭全部',
        btnAlign: 'c', // 按钮居中
        shade: 0, // 不显示遮罩
        //maxmin: true, //开启最大化最小化按钮
        yes: function(){
          layer.closeAll();
        }
      });		  
    }
  });
});
</script>

<script>
layui.use(function(){
  var layer = layui.layer;
  var util = layui.util;
  var $ = layui.$;
  // 事件
  util.on('lay-on', {
    'test-offset2': function(){
      var othis = $(this);
      var offset = othis.data('offset');
      // 弹出位置
      layer.open({
        type: 1,
        offset: offset || ['80px', '10px'], // 详细可参考 offset 属性
        id: 'ID-demo-layer-offset-'+ offset, // 防止重复弹出
        content: '<iframe  src="https://docs.qq.com/pdf/DWUFpSnNuTmdIQlVU?" width=100%px height=100% ></iframe>',
        area: ['300px', '300px'],
        //btn: '关闭全部',
        btnAlign: 'l', // 按钮居中
        shade: 0, // 不显示遮罩
        maxmin: true, //开启最大化最小化按钮
        yes: function(){
          layer.closeAll();
        }
      });		  
    }
  });
});
</script>

</body>

</html>